<template>
  <div class="menu-button-container">
    <!-- 正常 -->
    <el-button-group v-if="btnType == 'button'">
      <el-button
        v-for="btn in btnList"
        :key="btn.name"
        :type="btn.type"
        @click="handleChange(btn)"
        v-text="btn.name"
      />
    </el-button-group>

    <!-- 单选 -->
    <el-radio-group v-if="btnType == 'radio'" v-model="radio">
      <el-radio-button v-for="btn in btnList" :key="btn.name" :label="btn.name">
      </el-radio-button>
    </el-radio-group>
  </div>
</template>

<script>
import { getMenuBtn } from "@/api/role";
import { mapGetters } from "vuex";
export default {
  name: "MenuButton",
  props: {
    radioActive: {
      type: String || null,
      default: null
    },
    btnType: {
      type: String,
      default: "button"
    }
  },
  data() {
    return {
      radio: ""
    };
  },
  computed: {
    ...mapGetters(["pageTopBtn"]),
    btnList() {
      return [...this.pageTopBtn];
    }
  },

  watch: {
    radio(newVal) {
      this.$emit("update:radioActive", newVal);
    }
  },

  mounted() {
    if (this.btnList.length != 0) {
      this.radio = this.btnList[0].name;
    }
  },

  methods: {
    handleChange(v) {
      this.$emit("handleChange", v);
    }
  }
};
</script>

<style lang="scss" scoped>
.menu-button-container {
  margin-bottom: 10px;
  .hamburger {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
  }

  .hamburger.is-active {
    transform: rotate(180deg);
  }
}
</style>
